<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latLng = new google.maps.LatLng(13.8, 100.5);
    var map = new google.maps.Map(
      document.getElementById('mapCanvas'), {
      zoom: 11,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var image= '/images/home.gif';
    <% @marks.each_with_index do |mark,i|  %>
    var latLng<%=i%> = new google.maps.LatLng(<%= mark[:lat] %>, <%= mark[:lng] %>);
    var marker<%=i%> = new google.maps.Marker({
      position: latLng<%=i%>,
      title: '<%= mark[:title] %>',
      map: map,
      draggable: true,
      icon: image
    });
    <% end %>

    var latLng4 = new google.maps.LatLng(13.916944, 100.421389);
    var marker4 = new google.maps.Marker({
      position: latLng4,
      title: 'บางบัวทอง',
      map: map,
      draggable: true
    });
    var latLng5 = new google.maps.LatLng(13.9889, 100.31361);
    var marker5 = new google.maps.Marker({
      position: latLng5,
      title: 'ไทรน้อย',
      map: map,
      draggable: true
    });
    var latLng6 = new google.maps.LatLng(13.9125, 100.49833);
    var marker6 = new google.maps.Marker({
      position: latLng6,
      title: 'ปากเกร็ด',
      map: map,
      draggable: true
    });

  }

  google.maps.event.addDomListener(window, 'load',
    initialize);
</script>
<style>
  #mapCanvas {
    width: 500px;
    height: 500px;
}
</style>

<div id="mapCanvas"></div>
